<template>
    <div>
<van-tabs v-model:active="active">
  <van-tab title="商品">
    <swiper :swiper="detail.pics"></swiper>
    <div>{{ detail.goods_name }}</div>
    <div>${{ detail.goods_price }}</div>
  </van-tab>
  <van-tab title="详情">
    <div v-html="detail.goods_introduce"></div>
  </van-tab>
  <van-tab title="评价">内容 3</van-tab>
</van-tabs>
<van-action-bar>
  <van-action-bar-icon icon="chat-o" text="客服" dot />
  <van-action-bar-icon icon="cart-o" text="购物车" badge="5" />
  <van-action-bar-icon icon="shop-o" text="店铺" badge="12" />
  <van-action-bar-button type="warning" text="加入购物车" />
  <van-action-bar-button type="danger" text="立即购买" />
</van-action-bar>
    </div>
</template>

<script setup>
import {ref} from "vue";
import { detailApi } from "@/api/api";
import { useRoute, useRouter } from 'vue-router'
import swiper from "@/components/swiper.vue";
const router = useRouter()
const route = useRoute()

const goods_id=ref(route.query.goods_id);

const detail=ref({});
const detailFun=()=>{
    detailApi(goods_id.value).then((res)=>{
        detail.value=res.data.message;
    })
}
detailFun();
</script>

<style lang="scss" scoped>

</style>